/**
 * mixins
 * table表格、翻页 mixins
 * @author zhoufei
 * @date 2020/10/15
 * 翻页、删除提示等
 * 获取列表方法名需要统一为 getList()
 *
 * 使用
 * 在表格页面请求列表定义统一的方法 getList()
 * 在方法getList里面用 getListRequest 去请求数据
 */

/*
  翻页翻页HTML、直接copy到页面中使用

  <el-pagination v-on="pageOn" v-bind="pageBind"></el-pagination>

*/

// import request from '@/utils/request'
import { formatDate } from '@/utils/date'
import { isEmpty } from '@/utils'

export default {
  data() {
    return {
      /** table 列表数据 */
      list: [],
      /* 加载中 */
      loading: false,
      page: {
        size: 10, // 页大小
        current: 1, // 当前页
        total: 0 // 总页数
      }
    }
  },
  computed: {
    pageBind() {
      const { total, current, size } = this.page
      return {
        // layout: 'prev, pager, next', // 小型
        layout: 'first, prev, pager, next, last, jumper, sizes',
        // layout: 'total, sizes, prev, pager, next, jumper', // 完整
        // background: true,
        total: total,
        'page-size': size,
        'prev-text': '上一页',
        'next-text': '下一页',
        'current-page': current,
        'page-sizes': [10, 20, 50, 150, 200]
      }
    },
    pageOn() {
      return {
        'size-change': this.onSizeChange,
        'current-change': this.onCurrentChange
      }
    }
  },
  methods: {
    /*

    // getList 方法列子
    // @example
    // 请求表格列表数据
    getList() {
      const dataForm = { keyword: '', type: 1 };
      this.getListRequest('/api/system/list', dataForm);
    },

    */
    onSizeChange(val) {
      this.page.current = 1
      this.page.size = val
      this.getList()
    },

    onCurrentChange(val) {
      this.page.current = val
      this.getList()
    },

    handleSearch() {
      this.page.current = 1
      this.getList()
    },

    /**
     * 请求表格数据及处理
     * @param {String} url 请求url
     * @param {object} payload 数据
     * @param {String} method 请求方法、get、post
     */
    getListRequest(url, payload, method) {
      return new Promise((resolve, reject) => {
        this.loading = true
        const options = {
          url,
          method: (method || 'get').toLowerCase()
        }
        const data = {
          page: this.page.current, // 当前页
          pageSize: this.page.size,
          size: this.page.size, // 解决有些人有传size, 有些又是 pageSize
          ...payload
        }
        if (options.method === 'get') {
          options.params = data
        } else {
          options.data = data
        }

        this.$http(options).then(
          data => {
            if (typeof data.request === 'function') {
              // 真实的后端响应的数据
              // 有时候会在 aixos拦截中返回 response.data、而有时候返回的是 response、方便统一
              data = data.data
            }
            data = data.data
            this.loading = false
            this.list = data.list
            this.page.total = +data.total
            resolve(data)
          },
          err => {
            this.list = []
            this.page.total = 0
            this.loading = false
            reject(err)
          }
        )
      })
    },

    /**
     * 通用弹出确认操作 删除 下架等
     * @param {*} text 提示
     * @param {*} data 回调函数的data
     * @param {*} cb 回调
     */
    handleRow(text, data, cb) {
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          cb(data)
        })
        .catch(() => {})
    },

    // formatElTable(fn, ...args) {
    //   return function(row, column, cellValue, index) {
    //     return fn.apply(this, args, cellValue)
    //   }
    // },

    /**
     * 格式化表格的日期
     * @param {*} format
     * @param {*} defaultValue 默认值
     * @example <el-table-column label="上报时间" prop="date" :formatter="formatDateTable('yyyy-MM-dd')"></el-table-column>
     */
    formatDateTable(format = 'yyyy-MM-dd HH:mm:ss', defaultValue = '-') {
      return function(row, column, cellValue, index) {
        if (isEmpty(cellValue)) return defaultValue
        return formatDate(cellValue, format)
      }
    },

    /**
     * 状态配置文本、注意，没有渲染html、要使用类使用 v-status-html
     * @param {*} statusObj 状态配置对象
     * @param {*} defaultValue 默认值
     */
    formatStatusText(statusObj, defaultValue = '') {
      return function(row, column, cellValue, index) {
        const obj = statusObj[cellValue]
        return obj ? obj.text : defaultValue
      }
    },

    /**
     * 获取状态obj、没有时返回空对象
     * @param {Object} statusObj
     * @param {*} value
     */
    getStatusObj(statusObj, value) {
      return statusObj[value] || {}
    }
  }
}
